No todos los menús deben ser horizontales ni tampoco las etiquetas deben ser una nube, un menú vertical también nos ayuda a mantener ordenado nuestro espacio.
Los enlaces van a gusto y necesidad de cada uno si no tenemos demasiadas etiquetas un menú vertical es una forma vistosa de mostrarlas. Aunque, lo más usual es que nuestro menú sea simplemente una tarjeta de presentación donde irá nuestro mail, perfil, portfolio.
¿Y por qué no? los sitios para localizarnos o dicho de otro modo las ya imprescindibles redes sociales.

Nuestro menú tiene un efecto que se consigue con la propiedad transform ¿quieren saber que es con lujo de detalles? el post "Transformaciones con CSS"de Vagabundia nos lo aclara y muestra lo que podemos llegar conseguir.

Para los que quieren un menú sin efecto simplemente eliminando la propiedad en los estilos de transform li:hover es suficiente.Los colores y tamaño no es problema, ya está marcado el lugar para cambiar si así se desea.

Vamos a simplificar la tarea y para eso incluimos todo lo necesario en un gadget de HTML, al terminar guardamos los cambios y arrastramos el gadget al lugar indicado.
Hay que tener en cuenta que dependiendo de la anchura de nuestra sidebar es el ancho que debemos dar a nuestro menú.
Y este es el contenido del gadget.

<style>#transform ul {
background: none repeat scroll 0 0 transparent;
list-style: none outside none;
}
#transform ul li {
background: url("url-imagen") repeat scroll #B599C1; /* imagen y color de fondo */
border-bottom: 1px solid #fff; /* borde inferior */
color: #ffffff; /* color texto */
text-shadow: 1px 2px 2px #505050; /* sombra del texto */
list-style: none outside none;
padding: 5px; /* separación texto y borde */
width: 230px; /* ancho del menú */
}
#transform li a:link {
color: white; /* color enlace */
}
#transform li:hover {
-moz-transform: scale(1.15); /* efecto hover transform */
background-color: #6F4062; /* color de efecto hover */
}
</style>

<div class="text-align:center;">
<div id="transform">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div></div>

Configuramos los enlaces de la siguiente forma:
<a href="#">Enlace 1</a>

Sustituimos la almohadilla por la url del sitio a enlazar y el texto Enlace 1-2-3 y 4 por el texto que hace de enlace.
Unknown

hola gem@! yo quisiera un menú vertical sin fondo, solo las palabras (enlaces) y alineados a la izquierda. ¿cómo puedo hacerlo? gracias!

Responder
Gem@

:: Hola Lileka cuando hice este menú pensaba en tu comentario y pensé que era muy sencillo obtener lo que tu quería.
Para qu eno tenga imagen y color de fondo simplemente elimina la línea donde dice /* imagen y color de fondo */ también puedes sustituirla por background:transparent;

El texto que hace de enlace lo puedes llevar a la izquierda añadiendo la línea en negrita en:

#transform ul li {
text-align: left;
background:transparent; /* imagen y color de fondo */
border-bottom: 1px solid #fff; /* borde inferior */
color: #ffffff; /* color texto */
text-shadow: 1px 2px 2px #505050; /* sombra del texto */
list-style: none outside none;
padding: 5px; /* separación texto y borde */
width: 230px; /* ancho del menú */
}

Responder
Beben Koben

A true mozilla user :P
You just put up on hover for mozilla :D

Put it too for smoother ;)
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;

Responder
Unknown

Qué bonito te ha quedado Abu Juli :P

Responder
Gem@

:: Beben Koben mucha razón ;)

:: Me alegra que te guste Graciela :)

Responder
Unknown

hola gem@ muchas gracias por tu explicación. tengo un problema (¿cómo no iba a tenerlos YO:::???) bueno:
1. he puesto el mailto y mi dirección de correo parala etiqueta CONTACTO, pero no sale.
2. la separación entre las líneas es muy grande. ¿cómo puedo reducir el espacio?

y 3.... esto es lo peor que me está pasando, y es que aunque me suscribo a los comentarios de tu blog en cada post, no me llegan a mi mail con lo cual es de pura casualidad que me entero que me has dado una respuesta.

Ya sabes que tengo un problema en la plantilla de http://lafacunews. la sidebar derecha se me baja.... ¿cómo lo puedo arreglar? ¿qué es lo que pasa? ¡y mira que he corregido y corregido el width!!!! GRACIAS!!!

Responder
Unknown

la página es http://lafacunews.blogspot.com...

Responder
Gem@

:: Lileka si que es un problema lo de la suscripción porque ya te había respondido al tema de la sidebar pero no recuerdo en qué entrada ha sido así que la única solución que veo para eso es que de vez en cuando mires por si hay respuesta para no tener que responder a lo mismo varias veces.
Como te decía en anterior ocasión la solución más rápida y eficaz es darle más espacio al blog porque entre los márgenes y el ancho de la sidebar superan el ancho del contenedor principal outer-wrapper.
(Ahora he mirado y veo que ya lo has solucionado ese tema)

Para que el enlace de contacto funcione y nos lleva a la bandeja de correo es así:
mailto:aquí-tu-mail
(También veo que está solucionado)

Dices "2. la separación entre las líneas es muy grande. ¿cómo puedo reducir el espacio?"
yo pregunto a qué espacio te refieres, sidebar, los post?

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top